<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  
  <script src="js/jquery-3.7.1.min.js"></script>
  <script>
    function login() {
      // 使用ajax 来进行数据的传输，因为这个ajax不会再次打开一个新页面
      $.ajax({
        url: "user2/login",
        type: "post",//方法
        data: { //传输数据参数
          userName: $("#userName").val(),// 不加参数就是对其数据的获取
          password: $("#password").val()
        },
        // 当执行到这里后，就会等待后端的代码执行结束之后再执行下面的代码
        success: function(result) {//这里传回来的参数就是对应url路径下的方法返回的数据 这里的函数是回调函数
          if (result) {
            // 密码正确
            // 登录都跳转到 index.html 这个登录之后的页面
            location.href = "index.html";
            //或者使用下面的代码进行达到跳转后的页面
            // location.assign("index.html");

          }else {
            alert("密码错误，登录失败")
          }
        }
      });
    }

  </script>
</body>

</html>